<template>
  <Carousel v-model="value1" loop class="carousel">
    <CarouselItem>
      <div class="demo-carousel">
        <img src="@/assets/user/photo1.png"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
        <img src="@/assets/user/photo2.png"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
        <img src="@/assets/user/photo3.jpg"/>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="demo-carousel">
        <img src="@/assets/user/photo4.jpg"/>
      </div>
    </CarouselItem>
  </Carousel>
</template>

<script>
    export default {
        name: 'carousel',
      data () {
        return {
          value1: 0
        }
      }
    }
</script>

<style scoped lang="scss">
.carousel{
  .demo-carousel{
    img{
      display: block;
      width: 100%;
      height: 320px;
    }
  }
}
</style>
